 <template>
   <view style="width: 100%;height: 100%;">
     <view class="root" :style="{display: !visibleCamera ? 'flex': 'none'}">
       <view class="content">
         <uni-forms ref="formRef" :model="form" validateTrigger="blur" label-position="top" label-width="100%"
           err-show-type="toast">
           <view class="content-wrapper">
             <yy-title title="煤气罐信息"></yy-title>
             <view class="content-inner-wrapper">
               <uni-forms-item label="煤气罐规格:" name="specifications" required key="specifications">
                 <view class="form-content-item" :class="form.specifications ?  '' : 'input-item'">
                   <uni-easyinput type="text" v-model="form.specifications" :inputBorder="false" placeholder="请选择"
                     :clearable="false" />
                 </view>
               </uni-forms-item>
               <uni-forms-item label="出售单位:" name="sellingUnit" required key="sellingUnit">
                 <view class="form-content-item" :class="form.sellingUnit ?  '' : 'input-item'">
                   <uni-easyinput type="text" v-model="form.sellingUnit" :inputBorder="false" placeholder="请填写"
                     :clearable="true" />
                 </view>
               </uni-forms-item>
               <uni-forms-item label="购买数量:" name="quantity" required key="quantity">
                 <view class="form-content-item" :class="form.quantity ?  '' : 'input-item'">
                   <uni-easyinput type="number" v-model="form.quantity" :maxlength="11" :inputBorder="false"
                     placeholder="请填写" :clearable="true" />
                 </view>
               </uni-forms-item>
               <uni-forms-item label="购买时间:" name="buyTime" required key="buyTime">
                 <view class="form-content-item" :class="form.buyTime ?  '' : 'input-item'">
                   <uni-datetime-picker v-model="form.buyTime" type="date" :hide-second="true"
                     @change="handleTimeChange" :end="getEndOfTodayTimestamp()">
                     <uni-easyinput type="text" v-model="form.buyTime" :inputBorder="false" placeholder="请选择"
                       :clearable="true" disabled />
                   </uni-datetime-picker>
                 </view>
               </uni-forms-item>
               <uni-forms-item label="购买类型:" name="buyType" required key="buyType">
                 <view class="form-content-item" :class="form.buyType ?  '' : 'input-item'"
                   @click="hadleShowPicker('buyTypeEnum', 'buyType')">
                   <uni-easyinput type="text" v-model="form.buyType_text" :disabled="true" :inputBorder="false"
                     placeholder="请选择" :clearable="false" />
                   <uni-icons type="right" size="21" color="#C2C0C0"></uni-icons>
                 </view>
               </uni-forms-item>
               <view class="" v-if="form.buyType == 1">
                 <uni-forms-item label="购买单位名称:" name="buyerUnitName" required key="buyerUnitName">
                   <view class="form-content-item" :class="form.buyerUnitName ?  '' : 'input-item'">
                     <uni-easyinput type="text" :maxlength="30" v-model.trim="form.buyerUnitName" :inputBorder="false"
                       placeholder="请填写" :clearable="true" />
                   </view>
                 </uni-forms-item>
               </view>
               <uni-forms-item label="购买人姓名:" name="buyerName" required key="buyerName">
                 <view class="form-content-item" :class="form.buyerName ?  '' : 'input-item'">
                   <uni-easyinput type="text" :maxlength="30" v-model.trim="form.buyerName" :inputBorder="false"
                     placeholder="请填写" :clearable="true" />
                 </view>
               </uni-forms-item>
               <uni-forms-item label="购买人证件号码:" name="buyerIdCard" required key="buyerIdCard">
                 <view class="form-content-item" :class="form.buyerIdCard ?  '' : 'input-item'">
                   <uni-easyinput type="text" :maxlength="30" v-model.trim="form.buyerIdCard" :inputBorder="false"
                     placeholder="请填写" :clearable="true" />
                   <u-icon slot="right" size="21" name="scan" color="#2488F5"
                     @click="handleCamera('buyerIdCard')"></u-icon>
                 </view>
               </uni-forms-item>
               <uni-forms-item label="购买人联系电话:" name="buyerPhone" required key="buyerPhone">
                 <view class="form-content-item" :class="form.buyerPhone ?  '' : 'input-item'">
                   <uni-easyinput type="text" :maxlength="30" v-model.trim="form.buyerPhone" :inputBorder="false"
                     placeholder="请填写" :clearable="true" />
                 </view>
               </uni-forms-item>
               <uni-forms-item label="购买人现住址:" name="buyerAddress" key="buyerAddress">
                 <view class="form-content-item" :class="form.buyerAddress ?  '' : 'input-item'">
                   <uni-easyinput type="text" :maxlength="30" v-model.trim="form.buyerAddress" :inputBorder="false"
                     placeholder="请填写" :clearable="true" />
                 </view>
               </uni-forms-item>
               <uni-forms-item label="煤气罐钢瓶型号:" name="bottleModel" key="bottleModel">
                 <view class="form-content-item" :class="form.bottleModel ?  '' : 'input-item'">
                   <uni-easyinput type="text" v-model="form.bottleModel" :inputBorder="false" placeholder="请填写"
                     :clearable="true" />
                 </view>
               </uni-forms-item>
               <uni-forms-item label="煤气罐钢瓶编号:" name="bottleNumber" key="bottleNumber">
                 <view class="form-content-item" :class="form.bottleNumber ?  '' : 'input-item'">
                   <uni-easyinput type="text" v-model="form.bottleNumber" :inputBorder="false" placeholder="请填写"
                     :clearable="true" />
                 </view>
               </uni-forms-item>
               <uni-forms-item label="图片:(最多可上传3张图片，非必填)" name="imageListUrl" style="margin-bottom: 0;">
                 <u-upload :fileList="form.imageListUrl" @afterRead="(info) => afterReadFive(info, 'form', 94)"
                   @delete="(info) => deletePhoto(info, 'form')" name="imageListUrl" :maxCount="3" :multiple="true"
                   width="96" height="80">
                   <image :src="baseImgUrl + 'upload-icon3.png'" style="width: 200rpx; height: 160rpx"></image>
                 </u-upload>
               </uni-forms-item>
             </view>
           </view>
           <view class="content-wrapper">
             <yy-title title="所属信息"></yy-title>
             <uni-forms-item label="所属类型:" name="typeCode" required key="typeCode">
               <view class="form-content-item" :class="form.typeCode ?  '' : 'input-item'"
                 @click="hadleShowPicker('typeCode', 'typeCode')">
                 <uni-easyinput type="text" :maxlength="30" v-model.trim="form.typeCode_text" :inputBorder="false"
                   placeholder="请选择" :clearable="true" disabled />
                 <uni-icons type="right" size="21" color="#C2C0C0"></uni-icons>
               </view>
             </uni-forms-item>
             <view v-if="form.typeCode == 0">
               <uni-forms-item label="身份证号:" name="personIdCard" required key="personIdCard">
                 <view class="form-content-item" :class="form.personIdCard ?  '' : 'input-item'">
                   <uni-easyinput type="idcard" :maxlength="18" v-model.trim="form.personIdCard" :inputBorder="false"
                     placeholder="请填写" :clearable="true" />
                   <u-icon slot="right" size="21" name="scan" color="#2488F5"
                     @click="handleCamera('personIdCard')"></u-icon>
                 </view>
               </uni-forms-item>
               <uni-forms-item label="姓名:" name="personName" required key="personName">
                 <view class="form-content-item" :class="form.personName ?  '' : 'input-item'">
                   <uni-easyinput type="text" :maxlength="30" v-model.trim="form.personName" :inputBorder="false"
                     placeholder="请填写" :clearable="true" />
                 </view>
               </uni-forms-item>
               <uni-forms-item label="联系电话:" name="personPhone" required key="personPhone">
                 <view class="form-content-item" :class="form.personPhone ?  '' : 'input-item'">
                   <uni-easyinput type="number" :maxlength="11" v-model.trim="form.personPhone" :inputBorder="false"
                     placeholder="请填写" :clearable="true" />
                 </view>
               </uni-forms-item>
             </view>
             <view v-else>
               <uni-forms-item label="单位名称:" name="companyMessageId" required key="companyMessageId">
                 <view class="form-content-item" :class="form.companyMessageId ?  '' : 'input-item'"
                   @click="handleSelectUnit">
                   <uni-easyinput type="text" :maxlength="30" v-model.trim="form.companyMessageId_text"
                     :inputBorder="false" disabled placeholder="请选择" :clearable="true" />
                 </view>
               </uni-forms-item>
               <uni-forms-item label="联系电话:" name="companyMessagePhone" required key="companyMessagePhone">
                 <view class="form-content-item" :class="form.companyMessagePhone ?  '' : 'input-item'">
                   <uni-easyinput type="number" :maxlength="11" v-model.trim="form.companyMessagePhone"
                     :inputBorder="false" placeholder="请填写" :clearable="true" />
                 </view>
               </uni-forms-item>
             </view>
           </view>
         </uni-forms>
       </view>
       <view class="bottom">
         <yy-button-submit @submit="onSubmit"></yy-button-submit>
       </view>
     </view>
     <u-keyboard @backspace="backspace" autoChange safeAreaInsetBottom @cancel="showKeyBoard = false"
       @confirm="showKeyBoard = false" ref="uKeyboard" mode="car" :show="showKeyBoard" @change="valChange"></u-keyboard>
     <yy-photo-mask :visible.sync="visibleCamera" :baseImgUrl="baseImgUrl" :clientId="clientId"
       :clientSecret="clientSecret" @parsedSuccess="onParsedSuccess"></yy-photo-mask>
     <u-picker closeOnClickOverlay v-if="pickerShow" :show="pickerShow" :columns="pickerData" keyName="text"
       @confirm="onPickerConfirm" @cancel="pickerShow = false" @close="pickerShow = false"
       :defaultIndex="defaultIndex"></u-picker>
   </view>
 </template>

 <script>
   import moment from '../../utils/moment'
   import pickerMixin from '../../utils/picker-mixin'
   import {
     aerocraftAdd,
     dsSyGastankAdd,
     electricvehiclesSave
   } from '@/api/api'
   import uploadFileMixin from '@/utils/upload-file-mixin'
   import {
     Toast,
     getOptionsParams,
     idCardRule,
     isLoading,
     navBack,
     phoneRule,
     getEndOfTodayTimestamp,
     navTo
   } from '@/utils/util'
   export default {
     mixins: [uploadFileMixin, pickerMixin],
     data() {
       return {
         baseImgUrl: this.$baseImgUrl,
         routerParams: {},
         clientId: this.$clientId,
         clientSecret: this.$clientSecret,
         visibleCamera: false,
         form: this.initForm(),
         showKeyBoard: false,
         rules: {
           specifications: {
             rules: [{
               required: true,
               errorMessage: "请填写煤气罐规格！",
             }]
           },
           sellingUnit: {
             rules: [{
               required: true,
               errorMessage: "请填写出售单位！",
             }]
           },
           quantity: {
             rules: [{
               required: true,
               errorMessage: "请填写购买数量！",
             }]
           },
           buyTime: {
             rules: [{
               required: true,
               errorMessage: "请选择购买时间！",
             }]
           },
           buyType: {
             rules: [{
               required: true,
               errorMessage: "请选择购买类型！",
             }]
           },
           buyerUnitName: {
             rules: [{
               required: true,
               errorMessage: "请填写购买单位名称！",
             }]
           },
           buyerName: {
             rules: [{
               required: true,
               errorMessage: "请填写购买人姓名！",
             }]
           },
           buyerIdCard: {
             rules: [{
               required: true,
               errorMessage: "请填写购买人证件号码！",
             }]
           },
           buyerPhone: {
             rules: [{
               required: true,
               errorMessage: "请填写购买人联系电话！",
             }]
           },

           imageListUrl: {
             rules: [{
               required: false,
               errorMessage: "请上传图片！",
             }]
           },
           typeCode: {
             rules: [{
               required: true,
               errorMessage: "请选择所属类型！",
             }]
           },
           personIdCard: {
             rules: idCardRule()
           },
           personName: {
             rules: [{
               required: true,
               errorMessage: "请填写姓名！",
             }]
           },
           personPhone: {
             rules: phoneRule()
           },
           companyMessageId: {
             rules: [{
               required: true,
               errorMessage: "请选择单位名称！",
             }]
           },
           companyMessagePhone: {
             rules: [{
               required: true,
               errorMessage: "请填写联系电话！",
             }]
           },
         },
         uKeyboard: null,
         getEndOfTodayTimestamp,
         scanType: '',
         dictMapping: {
           typeCode: [{
               value: 0,
               text: '个人所有'
             },
             {
               value: 1,
               text: '单位所有'
             }
           ],
           buyTypeEnum: [{
               value: 0,
               text: '个人购买'
             },
             {
               value: 1,
               text: '单位购买'
             }
           ]
         }
       }
     },
     onLoad(options) {
       this.routerParams = getOptionsParams(options)
       uni.$on('selected-unit', (data) => {
         this.$set(this.form, 'companyMessageId_text', data.companyName)
         this.$set(this.form, 'companyMessageId', data.id)
       })
     },
     onUnload() {
       uni.$off('selected-unit')
     },
     onReady() {
       this.$refs.formRef.setRules(this.rules)
     },
     methods: {
       initForm() {
         return {
           specifications: '',
           sellingUnit: '',
           quantity: '',
           buyTime: '',
           buyType: '',
           buyerUnitName: '',
           buyerName: '',
           buyerIdCard: '',
           buyerAddress: '',
           bottleModel: '',
           bottleNumber: '',

           imageListUrl: [],
           typeCode: '',
           personName: '',
           personPhone: '',
           personIdCard: '',
           companyMessagePhone: '',
           companyMessageName: '',
         }
       },
       onSubmit() {
         this.$refs.formRef.validate().then(() => {
             let data = {
               companyMessageId: this.routerParams.companyMessageId,
               ...this.form,
               buyTime: moment(this.form.buyTime).format('YYYY/MM/DD')
             };
             if (data.companyMessageId_text) {
               data.companyMessageName = data.companyMessageId_text
             }
             // 处理图片信息
             if (data.imageListUrl) {
               data.imageListUrl = data.imageListUrl.map(item => {
                 return item.halfPath
               })
             }
             isLoading(true)
             dsSyGastankAdd(data).then((res) => {
                 if (res.code == 200) {
                   setTimeout(() => {
                     navBack();
                   }, 100)
                   uni.$emit('register-load')
                 }
                 Toast(res.message);
               })
               .finally(() => {
                 isLoading(false)
               })
           })
           .catch(() => {})
       },
       handleCamera(scanType) {
         this.scanType = scanType
         this.visibleCamera = true;
       },
       onParsedSuccess(value) {
         const {
           domicileAddress,
           userName,
           idcard,
           nation
         } = value;
         if (this.scanType == 'buyerIdCard') {
           this.$set(this.form, "buyerName", userName);
           this.$set(this.form, "buyerIdCard", idcard);
         }
         if (this.scanType == 'personIdCard') {
           this.$set(this.form, "personName", userName);
           this.$set(this.form, "personIdCard", idcard);
         }
         this.visibleCamera = false;
       },
       handleShowCar() {
         this.showKeyBoard = true
       },
       // 按键被点击(点击退格键不会触发此事件)
       valChange(val) {
         // 将每次按键的值拼接到value变量中，注意+=写法
         if (this.form.vehicleNumber.length >= 15) {
           Toast('车牌号最多输入15位！')
           return
         }
         this.form.vehicleNumber += val;
         console.log(this.form.vehicleNumber);
       },
       // 退格键被点击
       backspace() {
         // 删除value的最后一个字符
         if (this.form.vehicleNumber.length) {
           this.form.vehicleNumber = this.form.vehicleNumber.substr(0, this.form
             .vehicleNumber.length - 1)
           if (this.form.vehicleNumber.length === 0) {
             // 没有 length 的时候
             // 切换成中文
             this.$refs.uKeyboard.$children[0].$children[2].abc = false
           }
         }
       },
       handleTimeChange() {},
       handleSelectUnit() {
         navTo({
           url: '/multipleRealInformation/selectUnit'
         })
       }
     }
   }
 </script>

 <style lang="scss" scoped>
   @import '@/styles/uni-form-label-top.scss';

   /deep/.u-keyboard__button--center {
     .u-keyboard__button__inner-wrapper:first-of-type {
       display: none;
     }
   }

   .root {
     display: flex;
     width: 100%;
     height: 100%;
     flex-direction: column;
     background: #F9F9F9;

     .content {
       flex: 1;
       height: 0;
       overflow: auto;

       .content-wrapper {
         background: #FFFFFF;
         box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(207, 207, 207, 0.1608);
         border-radius: 8rpx 8rpx 8rpx 8rpx;
         padding: 40rpx 20rpx;
         margin-bottom: 10rpx;
       }

       .pawn-list-wrapper {
         background: #F9F9F9;
         padding: 25rpx;
         margin-bottom: 10rpx;

         .title-name {
           display: flex;
           justify-content: space-between;
           margin-bottom: 23rpx;

           .name-i {
             font-weight: bold;
             font-size: 32rpx;
             color: #181818;
           }

           .delete-i {
             display: flex;
             align-items: center;
             font-weight: 500;
             font-size: 26rpx;
             color: #F94A4A;
             flex-shrink: 0;

             .text-delete {
               margin-left: 10rpx;
             }
           }
         }

         .i-item {
           margin-bottom: 15rpx;
           display: flex;

           .i-label {
             font-weight: 500;
             font-size: 28rpx;
             color: #999999;
             width: 119rpx;
             margin-right: 16rpx;
             position: relative;
             text-align: justify;
             text-align-last: justify;
             flex-shrink: 0;



             &::after {
               content: ':';
               position: absolute;
               right: -8rpx;
             }
           }

           .i-value {
             font-weight: bold;
             font-size: 28rpx;
             color: #101010;
           }

         }
       }

       .datetime-picker-wrapper {
         display: flex;
         align-items: center;
         justify-content: space-between;

         .text-t {
           font-weight: 500;
           font-size: 30rpx;
           color: #666666;
         }

         .t-item {
           font-weight: 400;
           font-size: 28rpx;
           color: #A2A2A2;
           width: 304rpx;
           height: 70rpx;
           background: #F9F9F9;
           border-radius: 8rpx 8rpx 8rpx 8rpx;
           border: 1rpx solid #F1EEEE;
           display: flex;
           align-items: center;
           justify-content: center;
         }

         .has-value {
           font-weight: bold;
           font-size: 30rpx;
           color: #181818;
         }
       }
     }
   }
 </style>